<template>
  <div class="gongdan">
    <div class="header">
      <el-form :inline="true" :model="dingdForm" class="demo-form-inline">
        <el-form-item label="订单编号:">
          <el-input v-model="dingdForm.number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="选择日期:">
          <el-date-picker
            v-model="dingdForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body">
      <!-- 表格 -->
      <el-table :data="gdList" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="80"
          :index="indexMethod"
        >
          <!-- <template v-slot="scoped">
            {{ scoped.row }}
          </template> -->
        </el-table-column>
        <el-table-column prop="orderNo" label="订单编号" />
        <el-table-column prop="skuName" label="商品名称" />
        <el-table-column prop="price" label="订单金额" />
        <el-table-column label="设备编号" prop="innerCode" />
        <el-table-column prop="status" label="订单状态">
          <template slot-scope="{ row }">
            <span>{{
              row.status === 0
                ? '未支付'
                : row.status === 1
                  ? '支付完成'
                  : row.status === 2
                    ? '出货成功'
                    : '出货失败'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="160" />
        <el-table-column label="操作">
          <template v-slot="scoped">
            <span style="color: #5f84ff" @click="lookXq(scoped)">查看详情</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="fenye">
        <el-pagination
          :current-page="pageIndex"
          :page-size="pageSize"
          layout=" slot,prev, next"
          @current-change="handleCurrentChange"
          @next-click="pageIndex++"
          @prev-click="pageIndex--"
        >
          <slot>
            <span
              style="
                font-size: 16px !important;
                color: #dbdfe5 !important;
                font-weight: 400;
              "
            >共{{ totalCount }}条记录 当前{{ pageIndex }}/{{
              totalPage
            }}</span>
          </slot>
        </el-pagination>
      </div>
    </div>

    <!-- 工单详情 -->
    <el-dialog title="工单详情" :visible.sync="xqDialogVisible">
      <el-descriptions
        :title="gdxq.status === 0 ? '未支付' : '出货成功'"
        :column="2"
      >
        <el-descriptions-item label="订单编号">{{
          gdxq.orderNo
        }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{
          gdxq.skuName
        }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">{{
          gdxq.price
        }}</el-descriptions-item>
        <el-descriptions-item label="设备编号">{{
          gdxq.innerCode
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          gdxq.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{
          gdxq.updateTime
        }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{
          gdxq.payType === 1 ? '支付宝' : '微信支付'
        }}</el-descriptions-item>
        <el-descriptions-item label="设备地址">
          {{ gdxq.addr }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getDingdanListAPI } from '@/api/order'
export default {
  data() {
    return {
      dingdForm: {
        number: '',
        time: ''
      },
      pageIndex: 1,
      pageSize: 10,
      isRepair: true,
      gdList: [],
      totalCount: null,
      totalPage: '',
      // 新建
      addDialogFormVisible: false,
      // 查看详情
      xqDialogVisible: false,
      formLabelWidth: '100px',
      gdxq: {},
      statusName: false
    }
  },
  computed: {
    indexMethod() {
      return (this.pageIndex - 1) * this.pageSize + 1
    }
  },
  created() {
    this.getGdList()
  },
  methods: {
    // 取消或者重新创建工单
    setGd() {
      if (this.statusName === '取消') {
        // 重新创建逻辑
        this.getUserList()
        this.addDialogFormVisible = true
        this.formAdd.number = this.gdxq.innerCode
        this.formAdd.state = this.gdxq.taskType.typeName
      } else {
        // 取消工单逻辑
        this.$confirm('取消工单后，将不能恢复，是否确认取消?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
          .then(async() => {
            this.$message({
              type: 'success',
              message: '取消成功!'
            })
            this.xqDialogVisible = false
            this.getGdList()
          })
          .catch(() => {})
      }
    },
    // 监听分页的页码
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.searchList()
    },
    // 查看详情
    lookXq(a) {
      this.xqDialogVisible = true
      this.gdxq = a.row
      console.log(this.gdxq)
    },
    // 查询
    searchList() {
      this.getGdList({
        orderNo: this.dingdForm.number,
        startDate: this.dingdForm.time[0]
          ? dayjs(this.dingdForm.time[0]).format('YYYY-MM-DD')
          : '',
        endDate: this.dingdForm.time[1]
          ? dayjs(this.dingdForm.time[1]).format('YYYY-MM-DD')
          : ''
      })
    },
    // 列表渲染
    async getGdList(params) {
      const res = await getDingdanListAPI({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        ...params
      })
      // console.log(res)
      this.gdList = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
    }
  }
}
</script>

<style lang="scss" scoped>
.gongdan {
  background-color: #f8fafd;
  height: 900px;
}
::v-deep .header {
  padding-top: 30px;
  .el-form {
    background-color: #fff;
    .el-form-item__label {
      font-size: 14px;
      color: #606266;
      font-weight: normal;
    }
  }
}
::v-deep .body {
  margin-top: 20px;
  padding-top: 20px;
  background-color: #fff;
  .el-table .cell {
    height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .el-button {
    width: 80px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 20px;
  }

  .is-leaf {
    background-color: #f3f6fb;
    .cell {
      font-weight: 500;
      text-align: left;
      color: rgb(102, 102, 102);
    }
  }
  .fenye {
    background: #fff;
    padding: 32px 16px;
    display: flex;
    justify-content: space-between;
    .zong {
      font-size: 16px !important;
      color: #dbdfe5 !important;
      font-weight: normal;
    }
  }
}
::v-deep .el-dialog__body {
  padding-left: 65px;
}
::v-deep .el-form-item__label {
  font-weight: normal;
}
</style>
